.statistic{
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100%;
  margin-top: 5px;
}
.mid{
  border: 2px solid black;
  width: 100%;
  height: 25vh;
  background-color: white;
  margin-left: 5px;
}
.leftBar{
  border: 2px solid black;
  width: 100%;
  height: 45vh;
  background-color: white;
}
.rightBar{
  border: 2px solid black;
  width: 100%;
  height: 45vh;
  background-color: white;
  margin-left: 10px;
}
.bottomRight{
  border: 2px solid black;
  width: 100%;
  height: 45vh;
  background-color: white;
  margin-left: 10px;
  //margin-top: -15vh;
}
.bottomMid{
  border: 2px dashed black;
  width: 100%;
  height: 65vh;
  background-color: white;
  margin-left: 5px;
  margin-top: -20vh;
}
.bottomLeft{
  border: 2px solid black;
  width: 100%;
  height: 45vh;
  background-color: white;
  //margin-top: -15vh;
}
.play{
  background-color: white;
}
.bottomPie{
  border-top:1px solid black;
  width: 100%;
  height: 22vh;
}
.weather{
  //border:solid 1px #7ec8ea;
  border:medium none;
  width:100%;
  height:12vh;
}
.process{
  margin-left:20%;
}
.box1{
  width:80%;
  height: 10vh;
  border:2px solid  rgba(24,255,42,1);
  margin-left: 10%;
  text-align: center;
  background-color: rgba(24,255,42,0.3);
}
.box2{
  width:80%;
  height: 10vh;
  border:2px solid rgba(255,190,0,1);
  margin-left: 10%;
  text-align: center;
  background-color: rgba(255,190,0,0.3);
}
.box3{
  width:80%;
  height: 10vh;
  border:2px solid rgba(255,0,0,1);
  margin-left: 10%;
  text-align: center;
  background-color: rgba(255,0,0,0.3);
}
.box4{
  width:80%;
  height: 10vh;
  border:2px solid rgba(3,237,255,1);
  margin-left: 10%;
  text-align: center;
  background-color: rgba(3,237,255,0.3);
}
.number{
  margin-top: 5px;
  font-size: 24px;
  font-weight: 900;
}
.name{
  font-size: 18px;
  font-weight: 400;
}